<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmp" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: 山有木兮木有枝
  Date: 2021/11/30
  Time: 14:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>文章类型管理</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- 可选: 包含 jQuery 库 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <style>
        td {
            vertical-align: middle !important;
        }

        .row {
            margin-bottom: 30px;
        }

        th {
            text-align: center;
        }

        #add {
            margin: 0 50px;
        }
    </style>
</head>
<body>
<!-- <h1>你好，世界！</h1> -->
<div class="container-fluid">
    <c:if test="${type!=null}">
        <div class="row">
            <div>
                <ol class="breadcrumb">
                    <li><a href="${pageContext.request.contextPath}/main/gomain" class="btn btn-primary btn-sm"
                           role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                        主&nbsp;&nbsp; 页</a></li>
                    <li class="active"><a href="${pageContext.request.contextPath}/articleType/findAllCount">文章类型管理</a> </li>
                    <li class="active">文章类型详情</li>
                </ol>
            </div>
        </div>
    </c:if>
    <c:if test="${type==null}">
        <div class="row">
            <div>
                <ol class="breadcrumb">
                    <li><a href="${pageContext.request.contextPath}/main/gomain" class="btn btn-primary btn-sm"
                           role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                        主&nbsp;&nbsp; 页</a></li>
                    <li class="active">文章管理</li>
                    <li class="active">文章管理</li>
                </ol>
            </div>
        </div>
    </c:if>


    <div class="row">
        <div class="col-sm-4 col-sm-offset-6">
            <div class="input-group input-group-sm">
                <span class="input-group-addon">是否发布</span>
                <select class="form-control" id="searchState" name="newsState">
                    <c:if test="${newsState==0}">
                        <option value="1" >已发布</option>
                        <option value="0" selected>未发布</option>
                        <option value="-1">全部</option>
                    </c:if>
                    <c:if test="${newsState==1}">
                        <option value="1" selected>已发布</option>
                        <option value="0" >未发布</option>
                        <option value="-1">全部</option>
                    </c:if>
                    <c:if test="${newsState!=0 and newsState!=1}">
                        <option value="1">已发布</option>
                        <option value="0" >未发布</option>
                        <option value="-1" selected>全部</option>
                    </c:if>

                </select>
                <span class="input-group-addon">按名称搜索</span>
                <input type="text" class="form-control" placeholder="输入包含的类型名称" id="searchWord" name="typeName" value="${typeName}"/>
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button" id="search">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                </span>
            </div><!-- /input-group -->
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-2">
            <div class="btn-toolbar">
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-success" id="all-select">全选</button>
                    <button class="btn btn-info" id="inverse-select">反选</button>
                    <button class="btn btn-success" id="notall-select">全不选</button>
                </div>
                <div class="btn-group btn-group-sm">
                    <a href="${pageContext.request.contextPath}/article/findByArticle/add/${page.currentPage}/${page.rows}" class="btn btn-primary" id="add">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加
                    </a>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-danger" id="batch_delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 批量删除
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <table class="table table-sm table-bordered table-hover text-center">
                <tr>
                    <th><input type="checkbox" id="main-type-id"/></th>
                    <th>文章标题</th>
                    <th>文章简介</th>
                    <th>发布时间</th>
                    <th>状态</th>
                    <th>类型</th>
                    <th>作者</th>
                    <th>操作</th>

                </tr>

                <c:forEach var="article" items="${page.list}">
               <tr>
               <td><input class="one" type="checkbox" value="${article.newsId}" newTitle="${article.newsTitle}" name="ids"></td>
               <td>${article.newsTitle}</td>
               <td>${article.newsSummary}</td>
               <td><fmp:formatDate value="${article.newsPublishTime}" pattern="yyyy-MM-dd HH:mm:ss"/> </td>
               <td>${article.newsState==0?"未发布":"已发布"}</td>
               <td>${article.articleType.typeName}</td>
               <td>${article.systemUser.userTrueName}</td>

                    <td>
                        <c:if test="${page.list.size()==1}">
                            <a href="${pageContext.request.contextPath}/article/deleteArticle/${article.newsId}/${page.currentPage-1}/${page.rows}" class="btn btn-danger btn-sm" id="delete" >
                                <!-- typeId -->
                                <span class="glyphicon glyphicon-trash delete" aria-hidden="true" ></span> 删除
                            </a>
                        </c:if>
                        <c:if test="${page.list.size()!=1}">
                            <a href="${pageContext.request.contextPath}/article/deleteArticle/${article.newsId}/${page.currentPage}/${page.rows}" class="btn btn-danger btn-sm" id="delete" >
                                <!-- typeId -->
                                <span class="glyphicon glyphicon-trash delete" aria-hidden="true" ></span> 删除
                            </a>
                        </c:if>

                    &nbsp;&nbsp;
                    <a href="${pageContext.request.contextPath}/article/findByArticle/${article.newsId}/${page.currentPage}/${page.rows}" class="btn btn-info btn-sm" id="update">
                    <span class="glyphicon glyphicon-pencil update" aria-hidden="true"></span> 发布
                    </a>

                    <a href="${pageContext.request.contextPath}/article/goDetailed/${article.newsId}/${page.currentPage}/${page.rows}" class="btn btn-info btn-sm">
                    <span class="glyphicon glyphicon-list-alt detail" aria-hidden="true"></span> 详情
                    </a>
                    </td>

                   </tr>
                </c:forEach>

            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-2">
            <div class="input-group input-group-sm" style="margin-top: 20px">
                <span class="input-group-addon">共计：${page.totalPage}页/${page.totalCount}条记录，每页</span>
                <select class="form-control" id="select">
                    <C:if test="${page.rows==3}">
                        <option value="3" selected>3</option>
                        <option value="6">6</option>
                        <option value="9">9</option>
                    </C:if>
                    <C:if test="${page.rows==6}">
                        <option value="3">3</option>
                        <option value="6"  selected>6</option>
                        <option value="9">9</option>
                    </C:if>
                    <C:if test="${page.rows==9}">
                        <option value="3" >3</option>
                        <option value="6">6</option>
                        <option value="9" selected>9</option>
                    </C:if>

                </select>


                <span class="input-group-addon">条，跳转到</span>

                <input type="text" class="form-control" placeholder="请输入页码数" id="pages" name="currentPage"/>
                <span class="input-group-btn">
					<button class="btn btn-success btn-sm" type="submit" id="jump">跳转
						<span class="glyphicon glyphicon-send" aria-hidden="true"></span></button>
				</span>
            </div>
        </div>....
        <div class="col-sm-4 col-sm-offset-1" style="margin-left:13%">
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-sm">
                    <li><a href="${pageContext.request.contextPath}/article/findArticleAll?newsState=${newsState}&typeName=${typeName}&rows=${page.rows}">首页</a></li>


                    <c:if test="${page.currentPage==1}">
                        <li class="disabled"><a href="#">«</a></li>
                    </c:if>
                    <c:if test="${page.currentPage>1}">
                        <li>
                            <a href="${pageContext.request.contextPath}/article/findArticleAll?currentPage=${page.currentPage-1}&rows=${page.rows}&newsState=${newsState}&typeName=${typeName}">«</a>
                        </li>
                    </c:if>


                    <c:forEach begin="1" end="${page.totalPage}" var="i">
                        <c:if test="${page.currentPage==i}">
                            <li class="active">
                                <a href="${pageContext.request.contextPath}/article/findArticleAll?currentPage=${i}&rows=${page.rows}&newsState=${newsState}&typeName=${typeName}">第${i}页</a>
                            </li>
                        </c:if>
                        <c:if test="${page.currentPage!=i}">
                            <li>
                                <a href="${pageContext.request.contextPath}/article/findArticleAll?currentPage=${i}&rows=${page.rows}&newsState=${newsState}&typeName=${typeName}">第${i}页</a>
                            </li>
                        </c:if>
                    </c:forEach>

                    <c:if test="${page.currentPage==page.totalPage}">
                        <li class="disabled"><a href="#">»</a></li>
                    </c:if>
                    <c:if test="${page.currentPage<page.totalPage}">
                        <li>
                            <a href="${pageContext.request.contextPath}/article/findArticleAll?currentPage=${page.currentPage+1}&rows=${page.rows}&newsState=${newsState}&typeName=${typeName}">»</a>
                        </li>
                    </c:if>

                    <li><a href="${pageContext.request.contextPath}/article/findArticleAll?currentPage=${page.totalPage}&newsState=${newsState}&typeName=${typeName}&rows=${page.rows}">尾页</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<script>

    $("#batch_delete").click(function(){
        let ones=$(".one:checked")
        if(ones.length===0){
            alert("请选择要删除的项！")
        }else{
            let arr_id=[];
            let articleName=[]
            $.each(ones,function(i,n){
                arr_id.push($(n).val())
                articleName.push($(n).attr("newTitle"))
                console.log($(n).val())
                console.log(arr_id)
                console.log(articleName)
            })
            if(confirm("是否删除标题为【"+articleName.join(",")+"】的消息？")){
                console.log("提交到后台的gid为："+arr_id.join(","))

                $.ajax({
                    url:"${pageContext.request.contextPath}/article/deleteSelectedArticle",
                    type:"post",
                    //  data:{"name":$("#username").val()},
                    data:{"ids":arr_id.join(",")},
                    success:function (msg){
                        alert(msg)
                        <c:if test="${page.list.size()==1}">
                        window.location.href="${pageContext.request.contextPath}/article/findArticleAll?currentPage=${page.currentPage-1}&rows=${page.rows}"
                            +"&newsState="+$("#searchState").val()+"&typeName="+$("#searchWord").val()
                        </c:if>
                        <c:if test="${page.list.size()!=1}">
                        window.location.href="${pageContext.request.contextPath}/article/findArticleAll?currentPage=${page.currentPage}&rows=${page.rows}"
                            +"&newsState="+$("#searchState").val()+"&typeName="+$("#searchWord").val()
                        </c:if>
                    }
                })
            }
        }

    })
    $("#main-type-id").on("click",function(){
        $(".one").prop("checked",$(this).prop("checked"))
    })


    $("table").on("click",".one",function(){
        $("#main-type-id").prop("checked",$(".one").length==$(".one:checked").length)
    })

    $("#all-select").click(function (){
        $("#main-type-id").prop("checked",true)
        $(".one").prop("checked",$("#main-type-id").prop("checked"))
    })

    $("#notall-select").click(function (){
        $("#main-type-id").prop("checked",false)
        $(".one").prop("checked",$("#main-type-id").prop("checked"))
    })

    $("#inverse-select").click(function (){
        $(".one").each(function(index,item){
            item.checked = !item.checked
        })
        var flag = true;
        $(".one").each(function(index,item){
            if(item.checked === false){
                flag = false;
            }
        })
        $("#main-type-id").prop("checked",flag)
    })

    $("#select").change(function (){
        window.location.href="${pageContext.request.contextPath}/article/findArticleAll?rows="
            +$(this).val()+"&newsState="+$("#searchState").val()+"&typeName="+$("#searchWord").val()
    })

    $("#jump").click(function (){
        window.location.href="${pageContext.request.contextPath}/article/findArticleAll?currentPage="
            + $("#pages").val()+"&rows="+$("#select").val()+"&newsState="+$("#searchState").val()+"&typeName="+$("#searchWord").val()
    })

    $("#search").click(function (){
        window.location.href="${pageContext.request.contextPath}/article/findArticleAll?rows="+$("#select").val()+"&newsState="+$("#searchState").val()+"&typeName="+$("#searchWord").val()
    })

    $("#searchState").change(function (){
        window.location.href="${pageContext.request.contextPath}/article/findArticleAll?rows="+$("#select").val()+"&newsState="+$("#searchState").val()
    })



</script>
</body>
</html>
